<template>
  <div v-if="redirectUrl" class="redirect-info">
    <p class="redirect-text">
      认证成功后，您将被重定向到：
    </p>
    <p class="redirect-url">{{ redirectUrl }}</p>
  </div>
</template>

<script setup lang="ts">
interface Props {
  redirectUrl?: string | null
}

defineProps<Props>()
</script>

<style scoped>
/* Redirect Info */
.redirect-info {
  background: linear-gradient(135deg, #e0f2fe, #f3e5f5);
  border: 1px solid #b3e5fc;
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
}

.redirect-text {
  font-size: 14px;
  color: #37474f;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.redirect-url {
  font-size: 13px;
  color: #1565c0;
  margin: 0;
  font-family: 'Monaco', 'Menlo', monospace;
  word-break: break-all;
  background: rgba(255, 255, 255, 0.7);
  padding: 8px 12px;
  border-radius: 8px;
}
</style>
